<template>
    <div class="CollectMoney contract-detial-page contract-inquiry-detial">
        <Card>
            <div class="common_br">
                <h2 class="common_title">
                    <span>收款</span>
                    <span class="common_title_more">
                        <span>客户姓名:</span>
                        <span>{{this.custName}}</span>
                        <span>合同号:</span>
                        <span>{{contractNo}}</span>
                    </span>
                </h2>
                <div>
                    <Table width="100%" :row-class-name="rowClassName" :columns="tableHead" :data="data"
                           :loading="loading">
                        <!-- 收款方式 -->
                        <template slot-scope="{ row }" slot="sourceType">
                            <span>{{getTitle('receiptSourceType',row.sourceType)}}</span>
                        </template>
                        <!-- 还款状态 -->
                        <template slot-scope="{ row }" slot="receiptStatus">
                            <span>{{getTitle('receiptStatus',row.receiptStatus)}}</span>
                        </template>
                        <template slot-scope="{ row }" slot="undoEndAmt">
                            <span>{{getUndoEndAmt(row)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" @click="detail(row)">分配明细</Button>
                        </template>
                    </Table>
                </div>
            </div>
        </Card>
        <div v-if="detailModel">
            <Modal v-model="detailModel" :title="detailTitle" :width="1000" :closable="false"
                   :mask-closable="false">
                <ChangeDetailTable
                    :isSP="isSP"
                    :Obj="Obj"
                    :loading="loading"
                    :dataDict="dataDict"
                />
                <div slot="footer">
                    <Button size="small" @click="detailModel = false">返回</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
    import {getDictDataList, getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";
    import {
        getCollectionList,
        getDebitBatchDetails,
        getAccountRegister
    } from "_p/basic/api/contract/contract-detail-inquiry";
    import ChangeDetailTable from "_p/basic/pages/contract/revoke-collection/ChangeDetailTable";

    export default {
        // 合同明细详情
        name: "ContractInquiryDetial",
        components: {
            ChangeDetailTable,
        },
        data() {
            return {
                accountRegister: [],
                debitBatchDetails: [],
                loading: false,
                custName: "",
                detailTitle: "",
                isSP: false,
                detailModel: false,
                pageParams: null,
                contractNo: "",
                openPanel: [],
                Obj: {
                    contractNo: "",
                    caseNo: "",
                    receiptId: ""
                },
                // 放款模式(loanModel) 变更类型  变更主体(PersonRoleType)
                dictArr: ["receiptSourceType", "receiptStatus"],
                dataDict: {},
                tableHead: [
                    {
                        title: "操作",
                        slot: "action",
                        width: 100,
                        align: "center"
                    },
                    {
                        title: "收款时间",
                        key: "succeedTime",
                        minWidth: 150,
                        tooltip: true
                    },
                    {
                        title: "收款金额",
                        key: "arriveAmt",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "还款方式",
                        key: "sourceType",
                        minWidth: 100,
                        tooltip: true,
                        slot: "sourceType"
                    },
                    {
                        title: "还款状态",
                        key: "receiptStatus",
                        minWidth: 100,
                        tooltip: true,
                        slot: "receiptStatus"
                    },
                    {
                        title: "还款人",
                        minWidth: 100,
                        key: "sourceAccountName",
                        tooltip: true
                    },
                    {
                        title: "还款账号",
                        minWidth: 200,
                        key: "sourceAccount",
                        tooltip: true
                    },
                    {
                        title: "到账银行",
                        minWidth: 100,
                        key: "creditBankName",
                        tooltip: true
                    },
                    {
                        title: "分支行名称",
                        minWidth: 200,
                        key: "creditOpeningBankName",
                        tooltip: true
                    },
                    {
                        title: "未分配金额",
                        key: "unusedAmt",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "撤销日期",
                        key: "undoEndTime",
                        minWidth: 200,
                        tooltip: true
                    },
                    {
                        title: "撤销金额",
                        key: "undoEndAmt",
                        minWidth: 100,
                        tooltip: true,
                        slot: "undoEndAmt"
                    },
                    {
                        title: "用户",
                        key: "userName",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "收款号",
                        key: "creditAccount",
                        minWidth: 100,
                        tooltip: true
                    },
                    {
                        title: "摘要",
                        key: "summary",
                        minWidth: 100,
                        tooltip: true
                    }
                ],
                data: []
            };
        },
        computed: {},
        created() {
            this.getParams();
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getDictDataList();
                this.getTableData();
            },
            // 获取初始数据
            getParams() {
                const pageParams = this.afs.getPageParams(this);
                this.pageParams = pageParams;
                this.custName = pageParams.custName;
                this.contractNo = pageParams.contractNo;
            },
            // 分配明细
            detail(row) {
                this.detailModel = true;
                this.Obj.contractNo = this.contractNo;
                this.Obj.receiptId = row.id;
            },
            rowClassName(row, index) {
                if (row.receiptStatus == "revoke") {
                    return 'demo-table-info-row';
                }
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            },
            getUndoEndAmt(row) {
                if (row.receiptStatus == "revoke") {
                    return row.arriveAmt;
                } else {
                    return 0;
                }
            },
            // 数据字典
            getDictDataList() {
                getDictDataList(this.dictArr).then(res => {
                    this.dataDict = res;
                });
            },
            getTableData() {
                getCollectionList(this.contractNo).then(res => {
                    let sortableSet = false,
                        data = [],
                        debitBatchDetails = [],
                        accountRegister = [];
                    if (res.code === "0000") {
                        res.data.forEach(e => {
                            if (e.sourceType === 'bankDeduct') {
                                debitBatchDetails.push(e);

                            } else if (e.sourceType === 'transferAccounts') {
                                accountRegister.push(e);

                            } else {
                                //微信还款
                                //TODO
                            }
                        });
                        getDebitBatchDetails(debitBatchDetails).then(res => {
                            if (res.code === "0000") {
                                data =  Array.from(new Set([...data,...res.data]))
                                sortableSet ? this.sortFn(data) : sortableSet = true;
                            }
                        });
                        getAccountRegister(accountRegister).then(res => {
                            if (res.code === "0000") {
                                data = Array.from(new Set([...data,...res.data]))
                                sortableSet ? this.sortFn(data) : sortableSet = true;
                            }
                        });
                    }
                });
            },
            sortFn(data){
                if (Array.isArray(data)){
                    this.data = data.sort((a,b) => { return new Date(a.succeedTime) - new Date(b.succeedTime) })
                }
            },
            back() {
                //关闭页面
                this.afs.closeTab(this);
            },
            showSpin() {
                this.spinShow = true;
            },
            closeSpin() {
                this.spinShow = false;
            },
            changChildrenData(refDom, name, value) {
                if (this.$refs[refDom]) {
                    this.$refs[refDom][name] = value;
                }
            }
        }
    };
</script>
<style lang="less">
    @import "../../../../../styles/common/form.less";

    .ivu-table .demo-table-info-row td {
        color: #ec0e0e;
    }

    .CollectMoney {
        .common_title_more {
            padding-left: 10px;
            font-size: 12px;

            span {
                padding-left: 10px;
            }
        }
    }
</style>
